<template>
    <div class="image">
        <img :src="userInfo.headimgurl ? userInfo.headimgurl : url" alt="">
    </div>
    <div class="table">
            <el-button type="primary">操作</el-button>
        <el-descriptions class="tabel" title="我的中心" :column="4" border>
            <el-descriptions-item label="unid" :span="2">{{ userInfo.unid }}</el-descriptions-item>
            <el-descriptions-item label="账号" :span="2">{{ userInfo.username }}</el-descriptions-item>
            <el-descriptions-item label="vip等级" :span="2">{{ userInfo.vipLevel }}</el-descriptions-item>
            <el-descriptions-item label="vip到期时间" :span="2">
                <el-tag size="small" type="danger">{{ userInfo.vipExpires }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="昵称" :span="2">
                <el-tag size="small" type="success">{{ userInfo.nickname }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="手机号" :span="2">{{ userInfo.phone }}</el-descriptions-item>
            <el-descriptions-item label="角色名称" :span="2">{{ userInfo.roleName }}</el-descriptions-item>
            <el-descriptions-item label="性别" :span="2">{{ userInfo.sex }}</el-descriptions-item>
            <el-descriptions-item label="省份" :span="2">{{ userInfo.province }}</el-descriptions-item>
            <el-descriptions-item label="城市" :span="2">{{ userInfo.city }}</el-descriptions-item>
            <el-tag size="small">School</el-tag>
        </el-descriptions>
    </div>
</template>

<script setup>
import { userUser } from "@/store/users"
import { storeToRefs } from "pinia";

let userSotre = userUser()
let { userInfo } = storeToRefs(userSotre)
//"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"

let url = "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"


</script>

<script>
export default {
    meta: { title: 'wdzx', name: '我的中心', routeName: "mine", icon: "#icon-icon-test" }
}
</script>

<style lang="less" scoped>
body {
    position: relative;
}

.image {
    position: absolute;
    left: 50%;
    top: 20%;
    width: 200px;
    height: 200px;
    // border: 1px solid;
    display: flex;
    justify-content: center;
    align-items: center;

    :deep(img) {
        width: 100%;
        height: 100%;
    }
}

.table {
    width: 1100px;
    height: 150px;
    // border: 1px solid;
    position: absolute;
    left: 20%;
    top: 50%;

    :deep(.el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell) {
        width: 300px;
        height: 50px;
    }
}

.el-button{
    position: absolute;
    right: 0;
}
</style>


